<template>
  <div class="shopdetails">
    <!-- 顶部nav -->
    <NavBar title="商品详情"></NavBar>
    <!-- 图片 -->
    <van-row type="flex" justify="center">
      <van-col span="21">
      <van-image
        width="100%"
        :src="API.BASE_SERVER_URL + isData.defaultImg"/>
      </van-col>
    </van-row>
    <!-- 价格信息 -->
    <van-cell-group inset class="price">
      <van-cell
        :title="'￥' + (isData.shopPrice / 100).toFixed(2)"
        value="1" :label="isData.name"
        v-if="!isData.hot"
      />
      <van-cell
        :title="parseInt(isData.shopPrice / 100) + ' 积分' "
        value="1" :label="isData.name"
        v-else
      />
    </van-cell-group>
    <!-- 选择规格 -->
    <van-cell title="选择规格" is-link @click="isShowBase"/>
      <van-sku
          v-model="showBase"
          :sku="skuData.sku"
          :goods="skuData.goods_info"
          :goods-id="skuData.goods_id"
          :hide-stock="skuData.sku.hide_stock"
          :quota="skuData.quota"
          :quota-used="skuData.quota_used"
          :close-on-click-overlay="overlay"
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"
          />
    <!-- 底部菜单 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车"
        to="/cart"
        :badge="isShopnum"/>
      <van-goods-action-icon :icon="isStar" :text="isStarText" color="#ff5000" @click="doStar"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="toShou" v-if="!isData.hot" />
      <van-goods-action-button type="danger" text="立即购买" v-if="!isData.hot" />
      <van-goods-action-button
        type="danger"
        text="立即兑换"
        v-else
      />
    </van-goods-action>
  </div>
</template>
<script>
import skuData from '../utils/data'

export default {
  data () {
    return {
      isData: { defaultImg: '' },
      skuData: skuData,
      showBase: false,
      overlay: true,
      showCustom: false,
      showStepper: false,
      showSoldout: false,
      initialSku: { // 默认选中
        s1: '30349',
        s2: '1193',
        selectedNum: 3
      },
      customSkuValidator: () => '请选择xxx!',
      isStar: 'star-o',
      isStarText: '收藏',
      isShopnum: 0,
      userId: 0,
      starPage: 1 // 收藏夹页码
    }
  },
  watch: {
    showBase (val) {
    }
  },
  props: {
    id: {
      default: 1,
      type: [Number, String]
    }
  },
  methods: {
    onBuyClicked () {
      console.log(1)
    },
    onAddCartClicked () {
      console.log(2)
    },
    isShowBase () {
      this.showBase = true
    },
    async loadDate () {
      const { data: res } = await this.$get(this.API.API_URL_CATALOG_PRODUCT_DETAILS + '/' + this.id)
      this.isData = res
      this.skuData.quota = this.isData.quantity
      this.getStar()
    },
    // 获取用户收藏夹列表
    async getStar () {
      const { data: res } = await this.$post(this.API.API_URL_CUSTOMER_WISHLIST + '/' + this.starPage, {
        userId: this.userId
      })
      if (res) {
        res.wishlist.some(item => {
          if (item.productId === parseInt(this.id)) { // 判断返回数据有没有收藏此商品
            this.isStar = 'star'
            this.isStarText = '已收藏'
            return true
          }
        })
      }
    },
    // 点击收藏操作
    async doStar () {
      if (this.isStar !== 'star-o') { // 如果已收藏
        const { data: res } = await this.$post(this.API.API_URL_CUSTOMER_REMOVE_WISHLIST, {
          userId: this.userId,
          productId: this.id
        })
        if (res) { // 未收藏
          this.$toast.success('已取消')
          this.isStar = 'star-o'
          this.isStarText = '收藏'
        }
      } else {
        const { data: res } = await this.$post(this.API.API_URL_CUSTOMER_ADD_WISHLIST, {
          userId: this.userId,
          productId: this.id
        })
        if (res) {
          this.$toast.success('已收藏')
          this.isStar = 'star'
          this.isStarText = '已收藏'
        }
      }
    },
    async toShou () {
      await this.$post(this.API.API_URL_CART_ADD, {
        userId: this.userId,
        productId: this.id,
        quantity: 1,
        skuId: null,
        jsonData: null,
        optionValueKeyGroup: null
      })
      this.getShopnum()
    },
    async getShopnum () {
      const { data: res } = await this.$post(this.API.API_URL_CART_COUNT, {
        userId: this.userId
      })
      this.isShopnum = res
    },
    getUserId () {
      this.userId = localStorage.getItem('userId')
      if (!this.userId) this.$router.push('/login')
    }
  },
  created () {
    this.getUserId()
    this.loadDate()
    this.getShopnum()
  }
}
</script>
<style scoped>
.shopdetails {
  text-align: left;
}
.van-goods-action {
  z-index: 3;
}
.price .van-cell__title {
  font-size: 20px;
  color: #f3a618;
}
</style>
